<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" href="/static/bs-3.3.7/css/bootstrap.css">
</head>
<body>
<div class="container col-md-offset-3 col-md-6">
    <div class="panel-primary" style="margin-top: 100px;">
        <div class="panel-heading" style="border-top-left-radius: 30px; border-top-right-radius: 30px;">
            <h3 class="text-center">注册</h3>
        </div>
        <div class="panel-body bg-info" style="border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;">
            <form action="" method="" class="form form-horizontal">
                {% csrf_token %}
                <div class="form-group">
                    <label for="username" class="control-label font-1 col-md-2 text-right">用户名：</label>
                    <div class="col-md-9 input-div">
                        <input type="text" id="username" class="form-control" name="username" required>
                        <span class="pull-right" style="color: red; font-size: 12px;"><!--用户已存在--></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="control-label font-1 col-md-2 text-right">密码：</label>
                    <div class="col-md-9 input-div">
                        <input max="16" min="6" type="password" id="password" class="form-control" name="password" required>
                        <span class="pull-right" style="color: red; font-size: 12px;"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="re_password" class="control-label font-1 col-md-2 text-right">确认密码：</label>
                    <div class="col-md-9 input-div">
                        <input max="16" min="6" type="password" id="re_password" class="form-control" name="re_password" required>
                        <span class="pull-right" style="color: red; font-size: 12px;"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="telephone" class="control-label font-1 col-md-2 text-right">手机号码：</label>
                    <div class="col-md-9">
                        <input type="number" min="10000000000" max="99999999999" id="telephone" class="form-control"
                               name="telephone" required>
                        <span class="pull-right" style="color: red; font-size: 12px;"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="email" class="control-label font-1 col-md-2 text-right">邮箱：</label>
                    <div class="col-md-9">
                        <input type="email" id="email" class="form-control" name="email" required>
                        <span class="pull-right" style="color: red; font-size: 12px;"></span>
                    </div>
                </div>
                 <div class="form-group">
                    <label for="birthday" class="control-label font-1 col-md-2 text-right">生日：</label>
                    <div class="col-md-9">
                        <input type="text" id="birthday" class="form-control" name="birthday" required>
                        <span class="pull-right" style="color: red; font-size: 12px;"></span>
                    </div>
                </div>
                 <div class="form-group">
                    <label for="city" class="control-label font-1 col-md-2 text-right">所在城市：</label>
                    <div class="col-md-9">
                        <input type="text" id="city" class="form-control" name="city" required>
                        <span class="pull-right" style="color: red; font-size: 12px;"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="avatar" class="text-center center-block">
                        <img id="img-file" width="60" height="60" src="/static/img/user.png" alt="" title="个人头像">
                    </label>
                    <div class="hidden">
                        <input type="file" id="avatar">
                    </div>
                </div>
                <div class="form-group">
                    <input type="button" value="注册" class="register btn btn-primary col-md-4 col-md-offset-4">
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="register_info" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true"></span></button>
            <h4 class="modal-title" id="myModalLabel"></h4>
        </div>
            <div class="modal-footer">
                <button id="sure" type="button" class="btn btn-primary" data-dismiss="modal">确认
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/static/bs-3.3.7/js/jquery-3.3.1.js"></script>
<script src="/static/bs-3.3.7/js/bootstrap.js"></script>

<script>

    $('#avatar').change(function () {
        file = this.files[0];
        console.log(file)
        reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            $('#img-file').attr('src', reader.result)
        }

    });





    $('.input-div input').focus(function () {
        $(this).next().text("")
    });



    $('#username').blur(function () {

        var username = $(this).val();
        var _this = this;


        if (username) {
            $.ajax({
                url: '/check_username/',
                type: 'get',
                data: {
                    username: username
                },
                success: function (data) {
                    if (data.msg != 'ok') {
                        $(_this).next().text(data.msg)
                    } else{
                        location.href = '/'
                    }
                }
            })
        }

    })




    $('#password').blur(function () {

        var password = $(this).val();
        var length = password.length;
        if (length < 6) {
            $(this).next().text("密码过短")
        } else if (length > 16) {
            $(this).next().text("密码过长")
        }
    })

    $('#re_password').on('input', function () {
        password = $('#password').val();
        re_password = $(this).val();
        console.log(password)
        console.log(re_password)
        if (password != re_password) {
            $(this).next().text("密码不相同")
        } else {
            $(this).next().text("")
        }
    })

    $('.register').click(function () {
        key_values = $('.form').serializeArray();
        form_data = new FormData();
        $.each(key_values, function (index, obj) {
            form_data.append(obj.name, obj.value);
        });
        avatar = $('#avatar')[0].files[0];
        if (avatar) {
            form_data.append('avatar', avatar)
        }


        $.ajax({
            url: "/register/",
            type: 'post',
            data: form_data,
            contentType: false,
            processData: false,
            success: function (data) {
                $('#register_info').modal('show');
                $('#myModalLabel').text(data.msg);
                if  (data.status == 1) {
                    location.href = '/'
                }
            }

        })
    })

</script>

</html>